import { Component, ElementRef, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams, LoadingController } from 'ionic-angular';
import ECharts from 'echarts';


@IonicPage()
@Component({
  selector: 'page-mill',
  templateUrl: 'mill.html',
})
export class MillPage {
  @ViewChild('main') main: ElementRef;
  @ViewChild('container') container: ElementRef;
  chart: any;
  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private loadCtrl: LoadingController
  ) {
  }

  ngOnInit() {
    let loader = this.loadCtrl.create({
      content: "Please wait...",
      duration: 3000
    });
    loader.present();
    var dom = this.container.nativeElement;
    var myChart = ECharts.init(dom);
    var app: any = {};
    let option = {
      title: {
        text: '动态数据',
        subtext: '纯属虚构',
      
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#283b56'
          }
        }
      },
      legend: {
        data: ['最新成交价', '预购队列']
      },
      toolbox: {
        show: true,
        feature: {
          dataView: { readOnly: false },
          restore: {},
          saveAsImage: {}
        }
      },
      dataZoom: {
        show: false,
        start: 0,
        end: 100
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: true,
          data: (function () {
            var now = new Date();
            var res = [];
            var len = 10;
            while (len--) {
              res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
              now = new Date(Number(now) - 2000);
            }
            return res;
          })()
        },
        {
          type: 'category',
          boundaryGap: true,
          data: (function () {
            var res = [];
            var len = 10;
            while (len--) {
              res.push(len + 1);
            }
            return res;
          })()
        }
      ],
      yAxis: [
        {
          type: 'value',
          scale: true,
          name: '价格',
          max: 30,
          min: 0,
          boundaryGap: [0.2, 0.2]
        },
        {
          type: 'value',
          scale: true,
          name: '预购量',
          max: 1200,
          min: 0,
          boundaryGap: [0.2, 0.2]
        }
      ],
      series: [
        {
          name: '预购队列',
          type: 'bar',
          xAxisIndex: 1,
          yAxisIndex: 1,
          data: (function () {
            var res = [];
            var len = 10;
            while (len--) {
              res.push(Math.round(Math.random() * 1000));
            }
            return res;
          })()
        },
        {
          name: '最新成交价',
          type: 'line',
          data: (function () {
            var res = [];
            var len = 0;
            while (len < 10) {
              res.push(<any>(Math.random() * 10 + 5).toFixed(1) - 0);
              len++;
            }
            return res;
          })()
        }
      ]
    };
    app.count = 11;
    setInterval(() => {
      var axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');
      var data0 = option.series[0].data;
      var data1 = option.series[1].data;
      data0.shift();
      data0.push(Math.round(Math.random() * 1000));
      data1.shift();
      data1.push(<any>(Math.random() * 10 + 5).toFixed(1) - 0);

      option.xAxis[0].data.shift();
      option.xAxis[0].data.push(axisData);
      option.xAxis[1].data.shift();
      option.xAxis[1].data.push(app.count++);

      myChart.setOption(option as any);
      
    }, 2100);

    // let ctx = this.container.nativeElement;
    // this.chart = ECharts.init(ctx);
    // this.chart.setOption(
    //   {
    //     backgroundColor: '#2c343c',

    //     title: {
    //       text: 'Customized Pie',
    //       left: 'center',
    //       top: 20,
    //       textStyle: {
    //         color: '#ccc'
    //       }
    //     },

    //     tooltip: {
    //       trigger: 'item',
    //       formatter: "{a} <br/>{b} : {c} ({d}%)"
    //     },

    //     visualMap: {
    //       show: false,
    //       min: 80,
    //       max: 600,
    //       inRange: {
    //         colorLightness: [0, 1]
    //       }
    //     },
    //     series: [
    //       {
    //         name: '访问来源',
    //         type: 'pie',
    //         radius: '55%',
    //         center: ['50%', '50%'],
    //         data: [
    //           { value: 335, name: '直接访问' },
    //           { value: 310, name: '邮件营销' },
    //           { value: 274, name: '联盟广告' },
    //           { value: 235, name: '视频广告' },
    //           { value: 400, name: '搜索引擎' }
    //         ].sort(function (a, b) { return a.value - b.value }),
    //         roseType: 'angle',
    //         label: {
    //           normal: {
    //             textStyle: {
    //               color: 'rgba(255, 255, 255, 0.3)'
    //             }
    //           }
    //         },
    //         labelLine: {
    //           normal: {
    //             lineStyle: {
    //               color: 'rgba(255, 255, 255, 0.3)'
    //             },
    //             smooth: 0.2,
    //             length: 10,
    //             length2: 20
    //           }
    //         },
    //         itemStyle: {
    //           normal: {
    //             color: '#c23531',
    //             shadowBlur: 200,
    //             shadowColor: 'rgba(0, 0, 0, 0.5)'
    //           }
    //         }
    //       }
    //     ]
    //   }
    // );
  }
}
